<template>
  <div class="m-products-list">
    <dl>
      <dd 
        v-for="item in nav" 
        :key="item.name"
        :class="[item.name, item.active ? 's-nab-active' : '']"
        @click="navSelect"
      >
        {{item.txt}}
      </dd>
    </dl>
    <ul>
      <Item v-for="(item, idx) in list" :key="idx" :meta="item" />
    </ul>
  </div>
</template>

<script>
  import Item from './product.vue'

  export default {
    components: {
      Item
    },
    props: {
      list: {
        type: Array,
        default(){
          return []
        }
      }
    },
    data(){
      return{
        nav: [
          {
            name: 's-default',
            txt: '智能排序',
            active: true
          },
          {
            name: 's-price',
            txt: '价格排序',
            active: false
          },
          {
            name: 's-visit',
            txt: '人气最高',
            active: false
          }
        ]
      }
    },
    async asyncData({app}) {
      let {data} = await app.$axios.get('searchList')
      return {items: data.list}
    },
    methods: {
      navSelect(){
        console.log('select')
      }
    }
  }
</script>

<style lang="scss">

</style>